<template>
	<view class="content">
		<u-navbar
			title="账单明细" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="tab-box flex-ar" :style="{top: `${navHeight}px`}">
			<view class="tab-item" v-for="(item, index) in tabs" :key="index"
				@click="selection = item">
				<view :class="{'active': selection.id == item.id}">
					{{item.name}}
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view class="list" :style="{height: `calc(100vh - 42px - ${navHeight}px)`, marginTop: '41px'}" v-if="records">
			<view class="empty-box" v-if="records.length == 0">
				<u-empty mode="list" text="没有记录"></u-empty>
			</view>
			<u-list v-else @scrolltolower="loadMore" :height="`calc(100vh - 42px - ${navHeight}px)`">
				<view style="height: 20px;"></view>
				<u-list-item v-for="(item, index) in records" :key="index">
					<view class="item">
						<view :class="{line: true, error: item.type == 2}"></view>
						<view class="info">
							<view class="top-box flex-b">
								<view class="title">
									{{item.title}}
									<div :class="{dot:true, error: item.type == 2}"></div>
									<view :class="{tag:true, 'error-info': item.type == 2}">{{item.type == 1 ? '收入' : '支出'}}</view>
								</view>
								<view :class="{amount: true, 'error-info': item.type == 2}">
									{{item.type == 1 ? '+' : '-'}}{{item.amount}}元
								</view>
							</view>
							<view class="remark">
								{{item.remark}}
							</view>
							<view class="remark">
								变更后余额：￥{{item.after_balance}}
							</view>
							<view class="date">
								{{item.create_datetime}}
							</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :status="status" icon line />
				<view style="height: 10px;"></view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { getBillRecords } from '@/api';
	import token from '@/utils/token';
	
	export default {
		mixins: [systemInfo],
		data() {
			return {
				selection: {},
				tabs: [
					{
						id: 1,
						name: '全部',
						type: ''
					},
					{
						id: 2,
						name: '收入',
						type: 1
					},
					{
						id: 3,
						name: '支出',
						type: 2
					}
				],
				page: 1,
				records: [],
				hasMore: false,
				status: 'loadmore'
			}
		},
		onLoad() {
			this.selection = this.tabs[0];
			this.getSystemInfo();
			this.loadRecords();
		},
		onPullDownRefresh() {
			this.loadRecords();
		},
		methods: {
			async loadRecords() {
				if (!token.exists()) return;
				this.page = 1;
				const res = await getBillRecords(this.selection.type, this.page);
				this.records = res.data;
				this.hasMore = res.is_next;
				this.status = res.is_next ? 'loadmore' : 'nomore';
				uni.stopPullDownRefresh();
			},
			async loadMore() {
				if (this.status != 'loading' && this.hasMore) {
					this.page += 1;
					this.status = 'loading';
					const res = await getBillRecords(this.selection.type, this.page);
					this.records = this.records.concat(res.data);
					this.hasMore = res.is_next;
					this.status = res.is_next ? 'loadmore' : 'nomore';
				}
			},
		},
		watch: {
			selection: async function(value, oldValue) {
				if (oldValue.id && value.id !== oldValue.id) {
					this.loadRecords();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab-box {
    padding-top: 10px;
    height: 31px;
    background-color: #fff;
    color: #999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	
	.tab-item {
		width: 25%;
		display: flex;
		justify-content: center;
	}
	
	.active {
	    position: relative;
	    font-weight: 500;
	    color: $main-color;
		height: 100%;
		
		.line {
		    position: absolute;
		    width: 100%;
		    height: 3px;
		    bottom: 0px;
		    left: 0;
		    background-color: $main-color;
		}
	}
}

.list {	
	.empty-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.item {
		position: relative;
		margin: 0 10px 10px;
		border-radius: 6px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
		
		.line {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 4px;
			border-radius: 6px 0 0 6px;
			background-color: #f1a319;
		}
		
		.error {
			background-color: #f56c6c;
		}
		
		.info {
			margin: 4px;
			padding: 8px;
			display: flex;
			flex-direction: column;
	
			.title {
				font-size: 16px;
				font-weight: bold;
				display: flex;
				align-items: center;
				margin-bottom: 8px;
				
				.dot {
					width: 4px;
					height: 4px;
					background-color: #f1a319;
					border-radius: 4px;
					margin: 0 4px;
				}
				
				.error {
					background-color: #f56c6c;
				}
				
				.tag {
					font-size: 12px;
					font-weight: 500;
					color: #f1a319;
				}
				
				.error-info {
					color: #f56c6c;
				}
			}
			
			.amount {
				font-size: 16px;
				font-weight: bold;
				color: #f1a319;
			}
			
			.error-info {
				color: #f56c6c;
			}
			
			.remark {
				font-size: 14px;
				color: #666;
				margin-bottom: 2px;
			}
			
			.date {
				font-size: 13px;
				color: #666;
			}
		}
	}
}
</style>
